<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>line</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>

	<body>
		<canvas id="canvas" width="1200" height="1200"></canvas>

		<script type="text/javascript">
			function drawLine() {
				var canvas = document.getElementById('canvas')
				if (!canvas.getContext) return

				var ctx = canvas.getContext('2d')
				var lineCaps = ['butt', 'round', 'square']

				for (var i = 0; i < 3; i++) {
					ctx.beginPath()
					ctx.moveTo(20 + 30 * i, 30)
					ctx.lineTo(20 + 30 * i, 100)
					ctx.lineWidth = 20
					ctx.lineCap = lineCaps[i]
					ctx.stroke()
				}

				ctx.beginPath()
				ctx.moveTo(0, 30)
				ctx.lineTo(300, 30)

				ctx.moveTo(0, 100)
				ctx.lineTo(300, 100)

				ctx.strokeStyle = 'red'
				ctx.lineWidth = 1
				ctx.stroke()

				// 贝塞尔曲线
				ctx.beginPath()
				ctx.moveTo(400, 400)
				ctx.quadraticCurveTo(100, 700, 700, 900)
				ctx.stroke()
			}

			drawLine()
		</script>
	</body>
</html>
